.switchBox {
  @apply inline-block h-6;

  .switch {
    @apply relative inline-block w-full h-full cursor-pointer;
    border-radius: 1.25rem;
    transition: all 0.3s;
    box-shadow: 0.0625rem 0.0625rem 0.375rem 0.0625rem rgba(0, 0, 0, 0.2);

    &:after {
      @apply absolute w-5 h-5 left-0;
      content: '';
      border-radius: 1.125rem;
      top: 0.125rem;
      transition: all 0.3s;
      background-color: #999;
    }
  }

  .checks {
    @apply hidden;

    &:checked + .switch:after {
      @apply bg-white;
      transform: translateX(1.625rem);
    }
  }
}
